import React from 'react';
import { withRouter, Route } from 'react-router-dom';
import { inject, observer } from 'mobx-react';

import { Icon, Badge } from 'weaver-mobile';
import { TabPage, SearchAdvanced } from 'weaver-mobile-page';

import base from "../../util/base";
import {compareParams} from '../../util/CommunicateUtil'
import { getLabel } from "../../util/common";
import { toJS } from 'mobx';
@withRouter
@inject('wfCommunicateStore')
@observer
export default class TopTab extends React.Component {
    constructor() {
        super();
    } 

    componentWillMount () {
      const { location: { pathname, search }, wfCommunicateStore } = this.props;
      const { comSetStoreState, inital } = wfCommunicateStore;
      comSetStoreState({ path: pathname });
      inital();
    }

    getTabs() {
      const {  wfCommunicateStore:{hasRelatedMsg}} = this.props;
      
        let tabDatas = [{
            title: getLabel(512070,'全部'),
            key: "allCommunications",
        },{
            title: hasRelatedMsg ? <Badge dot>{getLabel(32572,'与我相关')}</Badge> : getLabel(32572,'与我相关'),
            key: "relatedMe",
        },{
          title:  getLabel(	512294, "交流资源"),
          key: "relatedResource"
        }];
        return tabDatas;
    };

    render() {
      const { history, wfCommunicateStore, clearReplyInfo} = this.props;
      const {comSetStoreState,  page, relatedAdSearch, onRelatedSearch, onReset} = wfCommunicateStore;
      const {tabKey} = base.wfGlobalStore;
      let compare = true;
      if( relatedAdSearch ) {
        compare = compareParams(toJS(relatedAdSearch.form.formData), toJS(relatedAdSearch.form.defaultValues));
      }
      
      const adType = compare ? 'filter-o': 'filter-o-hot';
      const menus = this.getTabs();
      const tabProps = {
        onTabClick: (tab) => {
          clearReplyInfo();
          comSetStoreState({ page: tab.key, 
                             relatedPage: '1', 
                             needPanel: false
                          });
          if(tab.key === 'allCommunications') {
            comSetStoreState({type: 'list'})
          }else if(tab.key === 'relatedMe') {
            comSetStoreState({type: 'relatedme', hasRelatedMsg: false})
          } 
        },
        page: page
      }
      return (
        <div className={`wf-commu-tab-info ${tabKey == 'communicate' ? 'wf-commu-tab-info-tab' : ''}`}>
          <TabPage 
            tabs={menus}
            btns={page === 'allCommunications' && [<Icon type={ adType } onClick={() => history.push(relatedAdSearch.path)} />]}
            tabProps={tabProps}
            />
          <SearchAdvanced 
            store={relatedAdSearch} 
            onSubmit={onRelatedSearch}
            onReset={onReset}
        />  
      </div>
    )
  }   
}